<template>
	<!-- <view class="main-class"> -->
		<!--  -->
	<z-paging ref="paging" v-model="clientData" @query="queryList" >	
		<template #top>
			<view class="header-class tn-flex justify-end" >
				<view class="status_bar" style="height: var(--status-bar-height); width: 100%; "></view>
				
				<!-- <view class="tn-gray-light_text tn-flex justify-between tn-text-xl tn-pl-xl tn-pr-xl" > -->
					<!-- <tn-icon name="left-arrow" size="40" @click="back"/>
					<span>选择客户</span>
					<tn-icon name="title" size="40" /> -->
					<!-- <tn-navbar height="45px" home-icon="" :bottom-shadow = "false" bg-color="tn-type-primary_bg"> 选择客户 </tn-navbar> -->
				<!-- </view> -->
				<tn-navbar height="45px" home-icon="" :bottom-shadow = "false" bg-color="tn-type-primary_bg"> 选择供应商 </tn-navbar>
				
				<tn-search-box
					v-model="searchValue"
					@input="searchInputEvent"
					@search="searchBtnClickEventPage"
					size="sm"
					placeholder="搜索关键词,检索供应商"
					placeholder-icon="search"
					border-color="#FFFFFF"
					text-color="#FFFFFF"
					placeholder-color="#FFFFFF"
					class="search-class tn-m-sm tn-text-bold"
					search-button-bg-color="#6bb7ec"
					shape="round"
					/>
				</view>	
		</template>
			
				
		<!-- </tn-sticky> -->
		<view class="client-class">
			<view v-for="(item,index) in clientData" >
				<view class="tn-m-sm" @click="selClient(item)">
					<view class="tn-text-ellipsis-2 tn-p-xs tn-text-lg">
						{{item.businessname}}
					</view>
					<view class="tn-text-ellipsis-2 tn-grey_text tn-text-sm tn-p-xs">
						{{item.address}}
					</view>
					<hr/>
				</view>	
			</view>
		</view>
	</z-paging>	
	
	<!-- </view> -->
	
</template>

<script setup>
	import {ref,reactive,onMounted} from 'vue'
	import { postCall  } from '@/api/index.js'
	import { createParams } from '@/utils/utils.js'
	import { EventBus } from '@/mitt/EventBus.js';
	const headerClass = ref('');
	onMounted(() => {
	  // 在页面展示时将页面滚动到顶部
		// doGetClient();
	});
	
	
	const paging = ref(null)
	
	let pageInfo = {
		P_PAGE : 1 ,
		P_PAGESIZE : 10
	}
	
	const queryList = (pageNo, pageSize) =>{
		pageInfo.P_PAGE = pageNo;
		pageInfo.P_PAGESIZE = pageSize;
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "SUPP";
		params["P_CON"] = searchValue.value;
		postCall(Object.assign(params,pageInfo)).then(res=>{
			if(res){
				if(res.code===200 || res.code===1000) {
					paging.value.complete(res.data.DATASET);
				}
			}
			
		}).catch(res =>{
			paging.value.complete(false);
		})
	}
	
	const searchBtnClickEventPage = () =>{
		paging.value.reload();
	}
	
	let back = (val) =>{
		EventBus.emit('suppInfo',val);
		uni.navigateBack();
		// uni.navigateTo({
		// 	url: '/pages/index/index'
		// });
	}
	const searchValue = ref("");
	const searchInputEvent = () =>{
		
	}
	const searchBtnClickEvent = () =>{
		
	}
	const procName = "PROC_APP_DO_PLAN";


	const clientData = ref([]);
	let doGetClient = () =>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "SUPP";		
		postCall(Object.assign(params,createParams(pageInfo))).then(res=>{
			if(res){
				if(res.code===200){
					res.data.DATASET.forEach(item => {
					  clientData.push(item);
					});
				}
			}
			
		})
	}
	
	let selClient = (val) =>{
		uni.setStorageSync("SUPPINFO",val);
		back(val);
	}
	
</script>

<style scoped>
	page{
		overflow: hidden;
	}
	.header-class-app{
		height: 14vh !important;
		flex-direction: column
	 } 
	
	.header-class-wechat{
		height: 17vh !important;
		flex-direction: column
	}
	.header-class{
		height: 17vh !important;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #333;
		color: #fff;
		padding: 10px 0;
		text-align: center;
		z-index: 999 
	}
	hr {
	  border: none;
	  border-top: 1px solid #dedede; /* 实线 */
	}
	.client-class{
		margin-top: 17vh;
	}
</style>